<template>
  <div class="container">
    <h1>父组件</h1>
    <p>{{ money }}</p>
    <button @click="money += 1000">点击加钱</button>
    <hr />
    <Son @change="fn" :money="money" />
    <!-- 💥模板中绑定的事件处理函数，默认会传递 $event (表示事件对象/子传父数据) -->
    <Son @change="fn($event)" :money="money" />
    <Son @change="money = $event" :money="money" />
  </div>
</template>

<script>
import { ref } from 'vue'
// 引入组件
import Son from './components/Son.vue'
export default {
  components: { Son },
  setup() {
    const money = ref(10000)

    const fn = e => {
      // console.log(e)
      money.value = e
    }

    return { money, fn }
  },
}
</script>
